﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="Content/CSS/bootstrap.min.css">
    <script src="Content/JS/jquery.min.js"></script>
    <script src="Content/JS/bootstrap.min.js"></script>

    <style>
        .container-fluid {
            background-color: #f2f2f2;
        }

        @media (min-width: 1200px) {
            .container {
                width: 1070px;
            }
        }

        @media (min-width: 992px) {
            .container {
                width: 900px;
            }
        }

        .service-info-top {
            position: absolute;
            width: 100%;
            top: -10px;
        }

            .service-info-top img {
                width: 100%;
                width: 100%;
            }

        .top-imgbox {
            width: 100%;
            position: relative;
        }

        .img-trans {
            position: absolute;
            left: 0;
            bottom: 0;
            display: block;
            height: 35px;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            content: attr(data-text);
            transition: all 1s ease;
            color: #FFF;
            text-align: center;
        }

            .img-trans .breadcrumb {
                background: none;
                width: 800px;
            }

                .img-trans .breadcrumb > li:before {
                    padding: 0 5px;
                    color: #fff;
                    content: ">\00a0";
                }

                .img-trans .breadcrumb a {
                    color: #fff;
                    text-decoration: none;
                }

        .company-name {
            font-size: 26px;
            margin-bottom: 10px;
            font-weight: bold;
        }

        .company-desc {
            margin-bottom: 20px;
        }

        .ol-otherinfo {
            list-style-type: none;
            padding-left: 0px;
        }

            .ol-otherinfo li {
                padding-top: 10px;
            }

                .ol-otherinfo li img {
                    padding-right: 5px;
                }

        .row-info-title {
            background-color: #fff;
            padding-top: 15px;
            padding-bottom: 15px;
            margin-top: 10px;
        }

        .ul-infoall {
            list-style-type: none;
        }

            .ul-infoall li {
                float: left;
                margin-right: 40px;
                text-align: center;
                width: 60px;
            }

            .ul-infoall span {
                display: block; /*设置为块级元素会独占一行形成上下居中的效果*/
                color: #808080;
                position: relative; /*定位横线（当横线的父元素）*/
            }

        .li-info2 span:before, .li-info1 span:before, .li-info3 span:before, .li-info3 span:after {
            content: ''; /*CSS伪类用法*/
            position: absolute; /*定位背景横线的位置*/
            top: 52%;
            background: #808080; /*宽和高做出来的背景横线*/
            height: 1px;
        }

        .li-info1 span:before {
            width: 60px;
            right: 40px;
        }

        .li-info2 span:before, .li-info3 span:before {
            width: 80px;
            right: 40px;
        }

        .li-info3 span:after {
            width: 520px;
            left: 40px;
        }

        .sel-active {
            color: #f00;
        }
        /*服务信息-公司详情*/
        .info-detail {
            margin: 10px 0px;
            margin-right: -15px;
            margin-left: -15px;
        }

        .info-detail-left {
            margin-right: 10px;
            float: left;
        }


        .right-cap1 {
            width: 290px;
            margin-bottom: 10px;
            background-color: #fff;
        }

        .rcap1 {
            border-bottom: 1px solid #ddd;
        }

        .rcap2 {
            padding: 15px 15px 32px 15px;
        }

        .rcap1 {
            padding: 10px 15px;
        }

        .row-cap-center {
            text-align: center;
        }

        .row-cap-left a {
            color: #1367a7;
            text-decoration: underline;
        }

        .rcap2 .col-md-tilte {
            padding: 5px 0px 0px 15px;
            width: 90px;
            float: left;
            font-size: 12px !important;
        }

        .rcap2 .col-md-answer {
            padding: 5px 0px 0px 0px;
            font-size: 12px !important;
        }

        .btn-backanswer {
            font-size: 12px !important;
            padding: 2px 5px;
            border-radius: 0px;
            background-color: #fff;
            color: #ec5546;
            border: 1px solid #ec5546;
        }

            .btn-backanswer:hover {
                background-color: #ec5546;
                border: 1px solid #ec5546;
                color: #fff;
            }

        .row-related {
            padding: 5px 15px;
        }

        .btn-relate-search {
            font-size: 12px !important;
            padding: 2px 5px;
            border-radius: 0px;
            color: #938a8a;
            border: 1px solid #938a8a;
            margin-right: 10px;
        }

        .ol-question {
            padding-left: 15px;
        }

            .ol-question li {
                clear: both;
                list-style-type: disc;
                color: #3b3838;
                padding-bottom: 5px;
            }

                .ol-question li a {
                    color: #3b3838;
                    text-decoration: none;
                }

        .question-more {
            text-align: right;
        }

            .question-more a {
                color: #f00;
                text-decoration: none;
            }

        .info-detail-right {
            background-color: #fff;
            height: 843px;
            float: left;
            width: 600px;
            padding-left: 20px;
            padding-right: 20px;
        }

          
        .seachr-all {
            text-align:right;
            margin-top:30px;
        }
        .seachr-all a {
            color:#f00;
            text-decoration:none;
        }
        .col-box {
            margin-top:15px;
        }
        .info-detail-right .col-p1 {
           text-align:right;
           margin-top:10px;
        }
       .info-detail-right .col-p1 a {
           color:#f00;
           text-decoration:none;
        }
         .fangan1{
                padding-right: 10px !important;
                padding-left: 10px !important;
            }
            .fangan1 img {
                width:100%;
            }
    </style>
    <script>
        $(function () {
            $(".ul-infoall li").click(function () {
                var d = $(this).attr("data-title");
                $(".ul-infoall li.li-infotext").each(function () {
                    $(this).removeClass("sel-active");
                });
                $(".ul-infoall li.li-infotext").eq(d).addClass("sel-active");
                $(".ul-infoall li.li-infoimg img").each(function () {
                    $(this).attr("href", "Content/Image/nosel-info.jpg");
                    debugger;
                });
                var s = $(".ul-infoall li.li-infoimg").eq(d).children().children().html();
                var s2 = $(".ul-infoall li.li-infoimg").eq(d).find(".in-img").html();
                var s3 = $(".ul-infoall li.li-infoimg").eq(d);
                debugger;

            });
        })
    </script>
</head>
<body>
    <iframe src="head.html" width="100%" scrolling="no" name="myiframe" frameborder="0" height="55px"></iframe>
    <div class="container-fluid">
        <div class="row" style="position: relative;">
            <div class="service-info-top">
                <div class="top-imgbox">
                    <img src="Content/Image/service-top.jpg" />
                    <div class="img-trans">
                        <ol class="breadcrumb">
                            <li><a href="#">全部分类</a></li>
                            <li><a href="#">软件市场</a></li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>

        <div class="container" style="margin-bottom: 15px; margin-top: 150px;">
            <div class="row">
                <div class="col-md-5" style="padding-left: 0px;">
                    <img src="Content/Image/company-info1.jpg" style="width: 345px; height: 260px;" />
                </div>
                <div class="col-md-7" style="padding-right: 0px;">
                    <div class="company-name">北京山石科技有限公司</div>
                    <div class="company-desc">北京山石科技有限公司北京山石科技有限公司北京山石科技有限公司北京山石科技有限公司北京山石科技有限公司北京山石科技有限公司</div>
                    <div class="conpany-otherinfo">
                        <ol class="ol-otherinfo">
                            <li>
                                <img src="Content/Image/icon-address.jpg" />北京山石科技有限公司</li>
                            <li>
                                <img src="Content/Image/cion-phone.jpg" />北京山石科技有限公司</li>
                            <li>
                                <img src="Content/Image/icon-email.jpg" />北京山石科技有限公司</li>
                        </ol>
                    </div>
                </div>
            </div>
            <div class="row row-info-title">
                <div class="row">
                    <div class="col-md-12">
                        <ul class="ul-infoall">
                            <li class="li-infotext" data-title="0">企业信息</li>
                            <li class="li-infotext" data-title="1">全部产品</li>
                            <li class="li-infotext" data-title="2">企业实例</li>
                            <li class="li-infotext sel-active" data-title="3">解决方案</li>
                        </ul>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <ul class="ul-infoall">
                            <li class="li-info1 li-infoimg" data-title="0">
                                <span>
                                <img src="Content/Image/nosel-info.jpg"  class="in-img"/>
                                </span></li>
                            <li class="li-info2 li-infoimg" data-title="1"><span>
                                <img src="Content/Image/nosel-info.jpg" /></span></li>
                            <li class="li-info2 li-infoimg" data-title="2"><span>
                                <img src="Content/Image/nosel-info.jpg" /></span></li>
                            <li class="li-info3 li-infoimg" data-title="3"><span>
                                <img src="Content/Image/sel-info.jpg" /></span></li>
                        </ul>
                    </div>
                    <!--<h6 class="title">企业信息 <span><img src="Content/Image/sel-info.jpg" /></span></h6>-->

                </div>

            </div>

            <div class="info-detail">
                <div class="info-detail-left">
                    <div class="right-cap1">
                        <div class="rcap1">
                            <span style="padding-right: 5px;">
                                <img src="Content/Image/cap1.jpg" /></span><span>相关信息</span>
                        </div>
                        <div class="rcap2">
                            <div class="row-cap-center">
                                <img class="obj-img" src="Content/Image/yun-list1.jpg">
                            </div>
                            <div class="row-cap-left"><a href="#">北京山石信息技术有限公司</a></div>
                            <div class="row">
                                <div class="col-md-5 col-md-tilte">客服电话：</div>
                                <div class="col-md-7 col-md-answer">400-3431-4287</div>
                            </div>
                            <div class="row">
                                <div class="col-md-5 col-md-tilte">客服邮箱：</div>
                                <div class="col-md-7 col-md-answer">MIDHHUE.COM</div>
                            </div>
                            <div class="row">
                                <div class="col-md-5 col-md-tilte">通讯地址：</div>
                                <div class="col-md-7 col-md-answer">通讯地址通讯地址通讯地址通讯地址通讯地址</div>
                            </div>
                            <div class="row">
                                <div class="col-md-5 col-md-tilte">问题处理：</div>
                                <div class="col-md-7 col-md-answer"></div>
                            </div>
                            <div class="row">
                                <div class="col-md-9 col-md-tilte">
                                    <button type="button" class="btn btn-primary btn-backanswer" data-toggle="button">提交反馈</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="right-cap1">
                        <div class="rcap1">
                            <span style="padding-right: 5px;">
                                <img src="Content/Image/cap1.jpg" /></span><span>相关寻找</span>
                        </div>
                        <div class="rcap2">
                            <div class="row row-related">
                                <span class="btn-relate-search">数据安全</span>
                                <span class="btn-relate-search">数据安全</span>
                            </div>
                            <div class="row row-related">
                                <span class="btn-relate-search">数据安全</span>
                                <span class="btn-relate-search">数据安全</span>
                            </div>
                            <div class="row row-related">
                                <span class="btn-relate-search">数据安全</span>
                                <span class="btn-relate-search">数据安全</span>
                            </div>
                            <div class="row row-related">
                                <span class="btn-relate-search">数据安全</span>
                                <span class="btn-relate-search">数据安全</span>
                            </div>
                            <div class="row row-related">
                                <span class="btn-relate-search">数据安全</span>
                                <span class="btn-relate-search">数据安全</span>
                            </div>
                            <div class="row row-related">
                                <span class="btn-relate-search">数据安全</span>
                                <span class="btn-relate-search">数据安全</span>
                            </div>
                        </div>
                    </div>
                    <div class="right-cap1">
                        <div class="rcap1">
                            <span style="padding-right: 5px;">
                                <img src="Content/Image/cap1.jpg" /></span><span>常见问题</span>
                        </div>
                        <div class="rcap2">
                            <ol class="ol-question">
                                <li><a href="#">什么是云市场</a></li>
                                <li><a href="#">什么是云市场</a></li>
                                <li><a href="#">什么是云市场</a></li>
                                <li><a href="#">什么是云市场</a></li>
                                <li><a href="#">什么是云市场</a></li>
                                <li><a href="#">什么是云市场</a></li>
                            </ol>
                            <div class="question-more"><a>更多问题>></a></div>
                        </div>
                    </div>

                </div>
                <div class="info-detail-right">
                     <div class="row">
                           <div class="col-md-12"><h3>通用解决方案</h3></div> 
                    </div>
                    <div class="row col-box">
                        <div class="col-md-4 fangan1"><img src="Content/Image/jiejue1.jpg" /></div>
                        <div class="col-md-4 fangan1"><img src="Content/Image/jiejue1.jpg" /></div>
                        <div class="col-md-4 fangan1"><img src="Content/Image/jiejue1.jpg" /></div>
                    </div>
                    <div class="row col-box">
                        <div class="col-md-4 fangan1"><img src="Content/Image/jiejue1.jpg" /></div>
                        <div class="col-md-4 fangan1"><img src="Content/Image/jiejue1.jpg" /></div>
                        <div class="col-md-4 fangan1"><img src="Content/Image/jiejue1.jpg" /></div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">  <p class="col-p1" style="clear:both;"><a href="#">查看全部>></a></p></div>
                    </div>
                </div>
            </div>

        </div>

    </div>

    <iframe src="bottom.html" width="100%" scrolling="no" name="myiframe" frameborder="0" height="490px"></iframe>



</body>
</html>
